<!--
 * @Description: 立体柱状图
 * @Author: Colin
 * @Date: 2023-10-17 10:33:42
-->

<template>
  <div class="ht-base-echart">
    <div :id="chartId" :style="{ height, width, ...barStyle }"></div>
    <div v-show="!chartData.length" class="no-data-tip">暂无数据</div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'BaseEcharts',
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    title: {
      type: String,
      default: ''
    },
    barStyle: {
      type: Object,
      default: () => {
        return {}
      }
    },
    chartData: {
      type: Array,
      default: () => [],
      required: true
    }
  },
  mounted() {
    this.initEchart()
    window.addEventListener('resize', () => {
      this.echart?.resize()
    })
  },
  activated() {
    this.echart?.resize()
  },
  data() {
    return {
      chartId: this.rndNum(10),
      echart: null, // 挂载echart实例
      barWidth: 15,
      pictorialBarH: 5
    }
  },
  watch: {
    chartData: {
      handler() {
        this.drawEchart()
      },
      deep: true
    }
  },
  methods: {
    rndNum: function (n) {
      var rnd = ''
      for (var i = 0; i < n; i++) rnd += Math.floor(Math.random() * 10)
      return rnd
    },
    initEchart: function () {
      if (!this.echart) {
        this.echart = echarts.init(document.getElementById(this.chartId))
      } else {
        this.echart.clear()
      }
    },
    setOptions: function () {
      // let that = this
      const options = {
        title: {
          text: ''
        },
        grid: {
          top: 15,
          left: 50,
          right: 10,
          bottom: 35
        },
        xAxis: {
          type: 'category',
          inverse: true,
          offset: 5,
          axisLabel: {
            show: true,
            interval: 0, // 'auto',
            color: 'rgb(106, 148, 255)'
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          data: this.chartData.map((item) => item.label)
        },
        yAxis: {
          type: 'value',
          offset: 5,
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgb(106, 148, 255)'
            }
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: true,
            inside: true,
            length: 4
          },
          axisLabel: {
            show: true,
            interval: 'auto',
            formatter: '{value}',
            color: 'rgb(106, 148, 255)'
          }
        },
        series: [
          {
            // 上半截柱子(背部阴影bar)
            name: '2019',
            type: 'bar',
            barWidth: this.barWidth,
            barGap: '-100%',
            z: 0,
            itemStyle: {
              //lenged文本
              opacity: 1,
              color: (param) => {
                const isHighLight = param.data.highLight
                return {
                  type: 'linear',
                  x: 0,
                  y: 1,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: isHighLight
                        ? 'rgba(99, 83, 78)' // 高亮色
                        : 'rgba(26, 39, 68)' // 0% 处的颜色
                      // : 'rgba(207, 235, 255)' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: isHighLight ? 'rgba(189, 137, 56)' : 'rgba(7, 27, 79, 0.5)' // 100% 处的颜色
                      // color: isHighLight ? 'rgba(189, 137, 56)' : 'rgba(228, 242, 255)' // 100% 处的颜色
                    }
                  ]
                }
              }
            }
            // data: this.chartData.map(item => item.maxValue)
          },
          {
            ///最顶部圆片(背部阴影最顶部圆片)
            name: '',
            type: 'pictorialBar',
            symbolSize: [this.barWidth, this.pictorialBarH],
            symbolOffset: [0, -2.5],
            z: 2,
            symbolPosition: 'end',
            itemStyle: {
              color: (param) => {
                const isHighLight = param.data.highLight
                return isHighLight ? 'rgb(97, 82, 78)' : 'rgb(7 35 86)' // 'rgb(174, 222, 255)'
              },
              opacity: 1
            }
            // data: this.chartData.map(item => item.maxValue)
          },
          // 序列3
          {
            //数据柱子 (蓝色柱子)
            name: '2020',
            type: 'bar',
            barWidth: this.barWidth,
            barGap: '-100%',
            itemStyle: {
              //lenged文本
              opacity: 1,
              // color: params => {
              //   return new echarts.graphic.LinearGradient(
              //     0,
              //     0,
              //     1,
              //     0,
              //     [
              //       {
              //         offset: 0,
              //         color: 'rgba(0, 111, 255)' // 0% 处的颜色
              //       },
              //       {
              //         offset: 1,
              //         color: 'rgba(29, 227, 255)' // 100% 处的颜色
              //       }
              //     ],
              //     false
              //   )
              // }
              color: (param) => {
                const isHighLight = param.data.highLight
                return {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: isHighLight ? 'rgba(241, 255, 79, 0.8)' : 'rgba(0, 111, 255)' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: isHighLight ? 'rgba(205, 127, 50, 0.8)' : 'rgba(29, 227, 255)' // 100% 处的颜色
                    }
                  ]
                }
              }
            },
            z: 3,
            label: {
              show: true,
              position: 'top',
              // "formatter": "{c}%"
              fontSize: 12,
              fontWeight: '500',
              color: '#fff' //'#34DCFF'//  '#02ff00'
              // offset: [0, -10]
            }
            //data: this.chartData.map(item => item.value)
          },
          // 序列4
          {
            //数据圆片(蓝色柱子的顶部圆片)
            name: '',
            type: 'pictorialBar',
            symbolSize: [this.barWidth, this.pictorialBarH],
            symbolOffset: [0, -2.5],
            z: 4,
            itemStyle: {
              opacity: 1,
              color: (param) => {
                const isHighLight = param.data.highLight
                return isHighLight ? 'rgb(205, 127, 50)' : 'rgb(27, 140, 255)'
              }
            },
            symbolPosition: 'end'
            // data: this.chartData.map(item => item.value)
            // 柱子顶部显示值
            // label: {
            //     show: true,
            //     position: 'top',
            //     distance: 0,
            //     formatter: '{c}'
            // },
          },
          {
            //最底部圆片
            name: '',
            type: 'pictorialBar',
            symbolSize: [this.barWidth, this.pictorialBarH], //圆片的形状大小
            symbolOffset: [0, -2.5], //圆片的偏移量
            z: 5,
            itemStyle: {
              opacity: 1,
              // color: 'rgb(0, 111, 255)'
              color: (param) => {
                const isHighLight = param.data.highLight
                return isHighLight ? 'rgba(205, 127, 50)' : 'rgba(36, 113, 213)'
              }
            },
            symbolPosition: 'end'
            // data: this.chartData.map(item => item.minValue)
          }
        ],
        dataset: {
          dimensions: ['label', 'maxValue', 'maxValue2', 'value', 'value2', 'minValue'],
          source: this.chartData
        }
      }
      this.echart.setOption(options)
    },
    drawEchart() {
      this.echart.clear()
      this.setOptions()
    }
  }
}
</script>

<style scoped>
.ht-base-echart {
  position: relative;
  width: 100%;
  height: 100%;
}
.no-data-tip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ccc;
}
</style>
